<!-- #layout name=blank --sideType='market'-->
<div id="app" v-cloak>
  <div class="page-header">
    <h1 class="title">Templates</h1>
  </div>

  <kb-breadcrumb :breads="breads"></kb-breadcrumb>

  <div class="template-list row clearfix">
    <div v-for="(item,index) in templates" class="col-md-3">
      <a @click.stop="onSelectTemplate($event,item)" class="thumbnail">
        <span class="wrapper">
          <img
            alt="thumbnail"
            class="lazy"
            :data-original="item.thumbNail"
            :alt="item.name"
            src="/_Admin/Images/logo.png"
          />
          <span class="desc">{{item.name}}</span>
        </span>
        <div class="caption">
          <strong>{{item.name}}</strong>
        </div>
      </a>
    </div>
  </div>

  <kb-pager
    v-if="pager"
    :page-nr="pager.pageNr"
    :total-pages="pager.totalPages"
    @change="changePager"
  ></kb-pager>
  <kb-template-modal
    v-model="showTemplateModal"
    :temp-data="templateData"
  ></kb-template-modal>
</div>

<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/components/kbPager.js",
      "/_Admin/Scripts/components/kbTemplateModal.js",
      "/_Admin/Scripts/lib/jquery.lazyload.min.js"
    ]);

    Kooboo.loadCSS(["/_Admin/Scripts/lib/bxSlider/jquery.bxslider.min.css"]);
  })();
</script>
<script src="/_Admin/View/Market/Scripts/Kooboo.Market.js"></script>
<script src="/_Admin/View/Market/Template/Index.js"></script>
